<template>
	<view class="cu-modal bottom-modal" :class="{ show: showAuth }" @tap="closeAuthModal" style="z-index: 10080;">
		<view class="login-wrap cu-dialog form-wrap  safe-area-inset-bottom" @tap.stop
			style="border-radius: 20rpx 20rpx 0 0;">
			<!-- 1.账号密码登录 -->
			<view v-if="authType === 'accountLogin'">
				<!-- 标题 -->
				<view class="head-box u-m-b-60 u-flex-col ">
					<view class="u-flex u-m-b-20">
						<view :style="{fontSize:flag_big?'19px':'',whiteSpace:'nowrap'}"
							class="head-title u-m-r-40 head-title-animation">账号登录</view>
						<view :style="{fontSize:flag_big?'19px':'',whiteSpace:'nowrap'}"
							class="head-title-active head-title-line" @tap="showAuthModal('smsLogin')">
							短信登录
						</view>
					</view>
					<view class="head-subtitle">如果未设置过密码，请点击忘记密码</view>
				</view>
				<view class="form-item  u-border-bottom ">
					<view class="item-content u-flex u-col-center input_BOX">
						<view :style="{fontSize:flag_big?'19px':''}" class="item-title">账号</view>
						<u-input :customStyle="{fontSize:flag_big?'19px': '15px'}" class="u-m-r-10 u-flex-1"
							placeholder="请输入账号" @blur="checkValue($event, 'account')"
							@input="checkValue($event, 'account')"
							:placeholderStyle="flag_big?placeholderStyleBIG: placeholderStyle"
							v-model="form['accountLogin'].data.account" type="text"></u-input>
						<button :style="{fontSize:flag_big?'17px':''}" class="u-reset-button forgot-btn"
							@tap="showAuthModal('forgotPwd')">
							忘记密码
						</button>
					</view>
					<view class="message-error">
						{{ form["accountLogin"].error.account || "" }}
					</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view :style="{fontSize:flag_big?'19px':''}" class="item-title">密码</view>
						<u-input maxlength="12" class="u-m-r-10 u-flex-1"
							:customStyle="{fontSize:flag_big?'19px': '15px'}" placeholder="请输入密码"
							:placeholderStyle="flag_big?placeholderStyleBIG: placeholderStyle"
							v-model="form['accountLogin'].data.password" type="password"
							@blur="checkValue($event, 'password')" @input="checkValue($event, 'password')"></u-input>
						<button :class="{BIGbtnLogin:flag_big}" class="u-reset-button login-btn-start"
							@tap="accountLoginSubmit">
							登录
						</button>
					</view>
					<view class="message-error">
						{{ form["accountLogin"].error.password || "" }}
					</view>
				</view>
				<button :style="{fontSize:flag_big?'17px':''}" class="u-reset-button type-btn"
					@tap="showAuthModal('register')">
					立即注册
				</button>
			</view>

			<!-- 2.短信登录 -->
			<view v-if="authType === 'smsLogin'">
				<view class="head-box u-m-b-60">
					<view class="u-flex u-m-b-20">
						<view :style="{fontSize:flag_big?'19px':'',whiteSpace:'nowrap'}"
							class="head-title-active u-m-r-40" @tap="showAuthModal('accountLogin')">
							账号登录
						</view>
						<view :style="{fontSize:flag_big?'19px':'',whiteSpace:'nowrap'}"
							class="head-title head-title-line head-title-animation">
							短信登录
						</view>
					</view>
					<view class="head-subtitle">未注册手机号请先点击下方立即注册</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view :style="{fontSize:flag_big?'19px':''}" class="item-title">手机号</view>
						<u-input class="u-m-r-10 u-flex-1" :customStyle="{fontSize:flag_big?'19px': '15px'}"
							placeholder="请输入手机号" @blur="checkValue($event, 'mobile')"
							@input="mobileInput($event, 'mobile')"
							:placeholderStyle="flag_big?placeholderStyleBIG: placeholderStyle"
							v-model="form['smsLogin'].data.mobile" type="number"></u-input>
						<button class="u-reset-button code-btn code-btn-start"
							:disabled="!form['smsLogin'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['smsLogin'].data.isMobileEnd ,'BIGYZM':flag_big}"
							@tap="getSmsCode('mobilelogin')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{ form["smsLogin"].error.mobile || "" }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view :style="{fontSize:flag_big?'19px':''}" class="item-title">验证码</view>
						<u-input class="u-m-r-10 u-flex-1" :customStyle="{fontSize:flag_big?'19px': '15px'}"
							@blur="checkValue($event, 'code')" @input="checkValue($event, 'code')" placeholder="请输入验证码"
							:placeholderStyle="flag_big?placeholderStyleBIG: placeholderStyle"
							v-model="form['smsLogin'].data.code" type="number"></u-input>
						<button :class="{BIGbtnLogin:flag_big}" class="u-reset-button login-btn-start"
							@tap="smsLoginSubmit">
							登录
						</button>
					</view>
					<view class="message-error">{{ form["smsLogin"].error.code || "" }}</view>
				</view>
				<button :style="{fontSize:flag_big?'17px':''}" class="u-reset-button type-btn"
					@tap="showAuthModal('register')">
					立即注册
				</button>
			</view>

			<!-- 3.注册 -->
			<view v-if="authType === 'register'">
				<view class="head-box u-m-b-60">
					<view :style="{fontSize:flag_big?'20px':''}" class="head-title u-m-b-20">注册</view>
					<view :style="{fontSize:flag_big?'16px':'',textAlign:'center',display:'unset'}"
						class="head-subtitle">请使用本人手机号完成注册</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view :style="{fontSize:flag_big?'19px':'',fontWeight:'bold'}" class="item-title">手机号</view>
						<u-input class="u-m-r-10 u-flex-1" :customStyle="{fontSize:flag_big?'19px': '15px'}"
							placeholder="请输入手机号" @blur="checkValue($event, 'mobile')"
							@input="mobileInput($event, 'mobile')"
							:placeholderStyle="flag_big?placeholderStyleBIG:placeholderStyle"
							v-model="form['register'].data.mobile" type="number"></u-input>
						<button class="u-reset-button code-btn code-btn-start"
							:disabled="!form['register'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['register'].data.isMobileEnd,'BIGYZM':flag_big }"
							@tap="getSmsCode('register')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{ form["register"].error.mobile || "" }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view :style="{fontSize:flag_big?'19px':'',fontWeight:'bold'}" class="item-title">密码</view>
						<u-input maxlength="12" class="u-m-r-10 u-flex-1"
							:customStyle="{fontSize:flag_big?'19px': '15px'}" @blur="checkValue($event, 'password')"
							@input="checkValue($event, 'password')" placeholder="请输入密码"
							:placeholderStyle="flag_big?placeholderStyleBIG:placeholderStyle"
							v-model="form['register'].data.password" type="password"></u-input>
					</view>
					<view class="message-error">{{ form["register"].error.password || "" }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view :style="{fontSize:flag_big?'19px':'',fontWeight:'bold'}" class="item-title">验证码</view>
						<u-input class="u-m-r-10 u-flex-1" :customStyle="{fontSize:flag_big?'19px': '15px'}"
							@blur="checkValue($event, 'code')" @input="checkValue($event, 'code')" placeholder="请输入验证码"
							:placeholderStyle="flag_big?placeholderStyleBIG:placeholderStyle"
							v-model="form['register'].data.code" type="number"></u-input>
						<button :class="{BIGbtnLogin:flag_big}" class="u-reset-button login-btn-start"
							@tap="registerSubmit">
							注册
						</button>
					</view>
					<view class="message-error">{{ form["register"].error.code || "" }}</view>
				</view>
				<button :style="{fontSize:flag_big?'17px':''}" v-if="!isLogin" class="u-reset-button type-btn"
					@tap="showAuthModal('accountLogin')">
					返回登录
				</button>
			</view>

			<!-- 4.忘记密码 -->
			<view v-if="authType === 'forgotPwd'">
				<view class="head-box u-m-b-60">
					<view :style="{fontSize:flag_big?'20px':'18px',color:flag_big?'#000':'#333'}"
						class="head-title u-m-b-20">忘记密码</view>
					<view :class="{BIGtostTitle:flag_big}" class="head-subtitle">为了您的账号安全，修改密码前请先进行安全验证</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view
							:style="{fontSize:flag_big?'19px':'15px',color:flag_big?'#000':'#333',width:flag_big?'85px':'70px'}"
							class="item-title">手机号</view>
						<u-input class="u-m-r-10 u-flex-1" :customStyle="{fontSize:flag_big?'19px': '15px'}"
							@blur="checkValue($event, 'mobile')" @input="mobileInput($event, 'mobile')"
							:placeholderStyle="flag_big?placeholderStyleBIG:placeholderStyle"
							v-model="form['forgotPwd'].data.mobile" type="number"></u-input>
						<button class="u-reset-button code-btn code-btn-start"
							:disabled="!form['forgotPwd'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['forgotPwd'].data.isMobileEnd ,'BIGgetCode':flag_big}"
							@tap="getSmsCode('resetpwd')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{ form["forgotPwd"].error.mobile || "" }}</view>
				</view>

				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view
							:style="{fontSize:flag_big?'19px':'15px',color:flag_big?'#000':'#333',width:flag_big?'85px':'70px'}"
							class="item-title">验证码</view>
						<u-input class="u-m-r-10 u-flex-1" :customStyle="{fontSize:flag_big?'19px': '15px'}"
							@blur="checkValue($event, 'code')" @input="checkValue($event, 'code')" placeholder="请输入验证码"
							:placeholderStyle="flag_big?placeholderStyleBIG:placeholderStyle"
							v-model="form['forgotPwd'].data.code" type="number"></u-input>
					</view>
					<view class="message-error">{{ form["forgotPwd"].error.code || "" }}</view>
				</view>

				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view
							:style="{fontSize:flag_big?'19px':'15px',color:flag_big?'#000':'#333',width:flag_big?'85px':'70px'}"
							class="item-title">密码</view>
						<u-input maxlength="12" class="u-m-r-10 u-flex-1"
							:customStyle="{fontSize:flag_big?'19px': '15px'}" @blur="checkValue($event, 'password')"
							@input="checkValue($event, 'password')" placeholder="请输入密码"
							:placeholderStyle="flag_big?placeholderStyleBIG:placeholderStyle"
							v-model="form['forgotPwd'].data.password" type="password"></u-input>
						<button :class="{'BIGbtnfoget':flag_big}" class="u-reset-button login-btn-start"
							@tap="forgotPwdSubmit">
							确认
						</button>
					</view>
					<view class="message-error">{{ form["forgotPwd"].error.password || "" }}</view>
				</view>
				<button v-if="!isLogin" class="u-reset-button type-btn" @tap="showAuthModal('accountLogin')">
					返回登录
				</button>
			</view>

			<!-- 5.绑定手机号 -->
			<view v-if="authType === 'bindMobile'">
				<view class="head-box u-m-b-60">
					<view :style="{fontSize:flag_big?'20px':'18px',color:flag_big?'#000':'#333'}"
						class="head-title u-m-b-20">绑定手机号</view>
					<view :class="{BIGtostTitle:flag_big}" class="head-subtitle">为了您的账号安全，请绑定手机号</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view
							:style="{fontSize:flag_big?'19px':'15px',color:flag_big?'#000':'#333',width:flag_big?'85px':'70px'}"
							class="item-title">手机号</view>
						<u-input class="u-m-r-10 u-flex-1" :customStyle="{fontSize:flag_big?'19px': '15px'}"
							@blur="checkValue($event, 'mobile')" @input="mobileInput($event, 'mobile')"
							placeholder="请输入手机号" :placeholderStyle="flag_big?placeholderStyleBIG:placeholderStyle"
							v-model="form['bindMobile'].data.mobile" type="number"></u-input>
						<button class="u-reset-button code-btn code-btn-start"
							:disabled="!form['bindMobile'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['bindMobile'].data.isMobileEnd  ,'BIGgetCode':flag_big}"
							@tap="getSmsCode('changemobile')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{ form["bindMobile"].error.mobile || "" }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view
							:style="{fontSize:flag_big?'19px':'15px',color:flag_big?'#000':'#333',width:flag_big?'85px':'70px'}"
							class="item-title">验证码</view>
						<u-input class="u-m-r-10 u-flex-1" :customStyle="{fontSize:flag_big?'19px': '15px'}"
							@blur="checkValue($event, 'code')" @input="checkValue($event, 'code')" placeholder="请输入验证码"
							:placeholderStyle="flag_big?placeholderStyleBIG:placeholderStyle"
							v-model="form['bindMobile'].data.code" type="number"></u-input>
						<button :class="{'BIGbtnfoget':flag_big}" :style="{padding:flag_big?'20px':'unset'}"
							class="u-reset-button login-btn-start" @tap="bindMobileSubmit">
							立即绑定
						</button>
					</view>
					<view class="message-error">{{ form["bindMobile"].error.code || "" }}</view>
				</view>
			</view>

			<!-- 6.修改密码 -->
			<view v-if="authType === 'changePwd'">
				<view class="head-box u-m-b-60">
					<view :style="{fontSize:flag_big?'20px':'18px',color:flag_big?'#000':'#333'}"
						class="head-title u-m-b-20">修改密码</view>
					<view class="head-subtitle"></view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view
							:style="{fontSize:flag_big?'19px':'15px',color:flag_big?'#000':'#333',width:flag_big?'85px':'70px'}"
							class="item-title">旧密码</view>
						<u-input maxlength="12" :customStyle="{fontSize:flag_big?'19px': '15px'}"
							class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'oldPassword')"
							@input="checkValue($event, 'oldPassword')" placeholder="请输入旧密码"
							:placeholderStyle="flag_big?placeholderStyleBIG:placeholderStyle"
							v-model="form['changePwd'].data.oldPassword" type="password"></u-input>
					</view>
					<view class="message-error">
						{{ form["changePwd"].error.oldPassword || "" }}
					</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view
							:style="{fontSize:flag_big?'19px':'15px',color:flag_big?'#000':'#333',width:flag_big?'85px':'70px'}"
							class="item-title">新密码</view>
						<u-input maxlength="12" class="u-m-r-10 u-flex-1"
							:customStyle="{fontSize:flag_big?'19px': '15px'}" @blur="checkValue($event, 'newPassword')"
							@input="checkValue($event, 'newPassword')" placeholder="请输入新密码"
							:placeholderStyle="flag_big?placeholderStyleBIG:placeholderStyle"
							v-model="form['changePwd'].data.newPassword" type="password"></u-input>
					</view>
					<view class="message-error">
						{{ form["changePwd"].error.newPassword || "" }}
					</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center input_BOX">
						<view
							:style="{fontSize:flag_big?'19px':'15px',color:flag_big?'#000':'#333',width:flag_big?'85px':'70px'}"
							style="white-space: nowrap;" class="item-title">确认密码</view>
						<u-input maxlength="12" class="u-m-r-10 u-flex-1"
							:customStyle="{fontSize:flag_big?'19px': '15px'}"
							@blur="checkValue($event, 'reNewPassword')" @input="checkValue($event, 'reNewPassword')"
							placeholder="再次输入新密码" :placeholderStyle="flag_big?placeholderStyleBIG:placeholderStyle"
							v-model="form['changePwd'].data.reNewPassword" type="password"></u-input>
					</view>
					<view class="message-error">
						{{ form["changePwd"].error.reNewPassword || "" }}
					</view>
				</view>
				<view class="editPwd-btn-box u-m-t-80">
					<button :class="{BIGpwdSave:flag_big}" class="u-reset-button save-btn"
						@tap="changePwdSubmit">保存</button>
					<button :style="{fontSize:flag_big?'16px':'14px'}" class="u-reset-button forgot-btn"
						@tap="showAuthModal('forgotPwd')">
						忘记密码
					</button>
				</view>
			</view>

			<!-- 第三方登录 -->
			<view v-if="authType === 'accountLogin' || authType === 'smsLogin'"
				class="auto-login-box u-flex u-row-center u-col-center">
				<!-- 微信  没有微信登录方式 直接注释掉-->
				<!-- <button v-if="['App', 'wxOfficialAccount', 'wxMiniProgram'].includes(platform)" class="u-reset-button"
					open-type="getPhoneNumber" @getphonenumber="thirdLogin('wechat', $event)"
					@tap="thirdLogin('wechat')">
					<image class="auto-login-img" :src="$IMG_URL + '/imgs/auto_login_wx.png'"></image>
				</button> -->
				<!-- 支付宝 -->
				<!-- <image
					v-if="['App', 'alipayMiniProgram', 'H5'].includes(platform)"
					class="auto-login-img"
					@tap="thirdLogin('alipay')"
					:src="$IMG_URL + '/imgs/auto_login_ali.png'"
					mode=""
				></image> -->
				<!-- 苹果 -->
				<!-- #ifdef APP-PLUS -->
				<!-- <image v-if="device === 'ios'" class="auto-login-img" @tap="thirdLogin('apple')"
					:src="$IMG_URL + '/imgs/auto_login_iphone.png'"></image> -->
				<!-- #endif -->
			</view>

			<!-- 协议 -->
			<view v-if="['accountLogin', 'smsLogin', 'register'].includes(authType)"
				class="agreement-box u-flex u-row-center">
				<u-checkbox v-model="protocol" shape="circle" :active-color="flag_big?'#ff8300': '#E9B461'">
					<view :style="{fontSize:flag_big?'14px':''}" class="agreement-text tcp-text u-flex u-col-center">
						我已阅读并遵守
						<view class="tcp-text u-flex u-col-center">
							<view @tap.stop="
								$Router.push({
									path: '/pages/public/richtext',
									query: { id: initShop.user_protocol || 0 }
								})
							" :style="{color:flag_big?'#ff3f00':''}">
								《用户协议》
							</view>
							<text style="color: #999;">与</text>

							<view @tap.stop="
	$Router.push({
		path: '/pages/public/richtext',
		query: { id: initShop.privacy_protocol || 0 }
	})
							" :style="{color:flag_big?'#ff3f00':''}">
								《隐私协议》
							</view>
						</view>
					</view>
				</u-checkbox>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 登录提示页
	 */
	import FormValidate from "@/shopro/validate/form";
	import schema from "@/uview-ui/libs/util/async-validator";
	import wechat from "@/shopro/wechat/wechat";
	import http from '@/shopro/request/index'
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	// #ifdef APP-PLUS
	import apple from "@/shopro/apple";
	// #endif

	export default {
		name: "shoproAuthModal",
		data() {
			return {
				platform: this.$platform.get(),
				device: this.$platform.device(),
				form: {
					// 1.账号密码登录
					accountLogin: {
						data: {
							account: "", // 账号
							password: "" // 密码
						},
						rules: {
							account: FormValidate.account,
							password: FormValidate.password
						},
						error: {
							account: "",
							password: ""
						}
					},

					// 2.短信登录
					smsLogin: {
						data: {
							mobile: "", // 手机号
							code: "", // 验证码
							isMobileEnd: false // 手机号输入完毕
						},
						rules: {
							code: FormValidate.code,
							mobile: FormValidate.mobile
						},
						error: {
							mobile: "", // 手机号
							code: "" // 验证码
						}
					},
					// 3.注册
					register: {
						data: {
							mobile: "", // 手机号
							code: "", // 验证码
							password: "", // 密码
							isMobileEnd: false // 手机号输入完毕
						},
						rules: {
							code: FormValidate.code,
							mobile: FormValidate.mobile,
							password: FormValidate.password
						},
						error: {
							mobile: "", // 手机号
							code: "", // 验证码
							password: "" // 密码
						}
					},

					// 4.忘记密码
					forgotPwd: {
						data: {
							mobile: "", //手机号
							code: "", //验证码
							password: "", //密码
							isMobileEnd: false // 手机号输入完毕
						},
						rules: {
							mobile: FormValidate.mobile,
							code: FormValidate.code,
							password: FormValidate.password
						},
						error: {
							mobile: "", //手机号
							code: "", //验证码
							password: "" //密码
						}
					},
					// 5.绑定手机号
					bindMobile: {
						data: {
							mobile: "", //手机号
							code: "", //验证码
							isMobileEnd: false // 手机号输入完毕
						},
						rules: {
							code: FormValidate.code,
							mobile: FormValidate.mobile
						},
						error: {
							mobile: "", //手机号
							code: "" //验证码
						}
					},
					// 6.修改密码
					changePwd: {
						data: {
							oldPassword: "", //旧密码
							newPassword: "", //新密码
							reNewPassword: "" //确认密码
						},
						rules: {
							oldPassword: FormValidate.password,
							newPassword: FormValidate.password,
							reNewPassword: [{
									required: true,
									message: "请重新输入密码",
									trigger: ["change", "blur"]
								},
								{
									validator: (rule, value, callback) => {
										return value === this.form.changePwd.data.newPassword;
									},
									message: "两次输入的密码不一致",
									trigger: ["change", "blur"]
								}
							]
						},
						error: {
							oldPassword: "", //旧密码
							newPassword: "", //新密码
							reNewPassword: "" //确认密码
						}
					}
				},
				codeText: "获取验证码",
				disabledCode: false,
				protocol: false, //是否同意隐私协议
				placeholderStyle: "font-size: 30rpx; font-weight: 500;color:#C2C7CF;",
				placeholderStyleBIG: "font-size: 38rpx; font-weight: 500;color:#C2C7CF;"
			};
		},

		computed: {
			...mapGetters(["initShop", "isLogin", "authType"]),
			showAuth: {
				get() {
					return !!this.authType;
				},
				set(value) {
					value ? uni.hideTabBar() : uni.showTabBar();
				}
			},
			// 是否为大字版
			flag_big() {
				return this.$store.state.user.isBIG
			}
		},
		mounted() {},
		methods: {
			...mapActions(["getUserInfo", "showAuthModal"]),

			// 检测
			checkValue(e, key) {
				this.validation(key);
			},

			// 校验数据
			validation(key, callback = () => {}) {
				let that = this;
				//拿到需要校验的数据
				let fieldValue = this.form[this.authType].data[key];
				//拿到需要检验的规则
				let rules = this.form[this.authType].rules[key];
				// 判空
				if (!rules || rules.length === 0) {
					return callback("");
				}
				// 设置当前的装填，标识为校验中
				let validateState = "validating";
				// 调用async-validator的方法
				let validator = new schema({
					[key]: rules
				});
				// 校验
				validator.validate({
						[key]: fieldValue
					}, {
						firstFields: true
					},
					(errors, fields) => {
						// 记录状态和报错信息
						validateState = !errors ? "success" : "error";
						let validateMessage = errors ? errors[0].message : "";
						that.form[that.authType].error[key] = validateMessage;
						callback(validateMessage);
					}
				);
			},

			// 校验全部数据
			validateAll(callback) {
				let that = this;
				return new Promise(resolve => {
					// 对当前所有表单检验
					let valid = true; // 默认通过
					let count = 0; // 用于标记是否检查完毕
					let errorArr = []; // 存放错误信息
					let curFormData = that.form[that.authType].data;
					Object.keys(curFormData).map(field => {
						that.validation(field, error => {
							// 如果回调有error
							if (error) {
								valid = false;
								errorArr.push(error);
							}
							if (++count === Object.keys(curFormData).length) {
								resolve(valid);
								if (errorArr.length) {
									this.$u.toast(errorArr[0]);
								}
								if (typeof callback == "function") callback(valid);
							}
						});
					});
				});
			},

			// 手机号是否输入完毕
			mobileInput(e, key) {
				this.form[this.authType].data.isMobileEnd = this.$u.test.mobile(
					this.form[this.authType].data.mobile
				);
				this.validation(key);
			},

			closeAuthModal() {
				this.$store.dispatch("showAuthModal", "");
			},

			// 获取短信验证码
			getSmsCode(type) {
				const that = this;
				if (that.form[this.authType].data.isMobileEnd && !that.disabledCode) {
					that.$http(
						"common.smsSend", {
							mobile: that.form[this.authType].data.mobile,
							event: type
						},
						"获取验证码中..."
					).then(res => {
						if (res.code === 1) {
							that.codeChange();
							that.$u.toast("验证码已发送，请注意查收短信");
						} else {
							that.$u.toast(res.msg);
						}
					});
				} else {
					that.$u.toast("请稍后再试");
				}
			},

			// 倒计时
			codeChange() {
				if (this.disabledCode) return;
				this.disabledCode = true;
				let n = 60;
				this.codeText = n + "s";
				const run = setInterval(() => {
					n -= 1;
					if (n < 0) {
						clearInterval(run);
					}
					this.codeText = n + "s";
					if (this.codeText < 0 + "s") {
						this.disabledCode = false;
						this.codeText = "重新获取";
					}
				}, 1000);
			},

			// 规则校验
			validateSubmit() {
				if (
					["accountLogin", "smsLogin", "register"].includes(this.authType) &&
					!this.protocol
				) {
					this.$u.toast("请同意用户协议");
					return false;
				}
				return this.validateAll();
			},

			// 第三方登录
			async thirdLogin(provider, payload = null) {
				if (this.platform === 'wxMiniProgram' && payload === null) return;
				if (!this.protocol) {
					this.$u.toast("请同意用户协议");
					return false;
				}
				const that = this;
				let token = "";
				switch (provider) {
					case "wechat":
						token = await wechat.login(payload);
						break;
					case "alipay":
						break;
					case "apple":
						token = await apple.appleIdOauth();
						break;
					default:
						break;
				}
				if (token) {
					that.closeAuthModal();
					that.getUserInfo(token);
				}
			},

			// 获取家属列表
			getHomeList(){
				// try{
				// 	this.$emit('childEvent');
				// 	console.log('登录触发家属列表');
				// }catch(e){
				// 	//TODO handle the exception
				// }
				http('user.homeList').then(res=>{
					console.log('登录页触发家属接口',res);
					let homeListData = res.data.userFamilyList
					homeListData = homeListData.filter(item=>{
						if(item.status==1){
							return item
						}
					})
					uni.setStorageSync('homeList',homeListData)
				})
			},

			// 1.账号登录
			async accountLoginSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						"user.accountLogin", {
							account: that.form["accountLogin"].data.account,
							password: that.form["accountLogin"].data.password
						},
						"登录中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.closeAuthModal();
							that.getUserInfo(res.data.token);
							that.$u.toast(res.msg);
							that.getHomeList()
						}

					});

			},

			// 2.短信登录
			async smsLoginSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						"user.smsLogin", {
							mobile: that.form["smsLogin"].data.mobile,
							code: that.form["smsLogin"].data.code
						},
						"登录中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.closeAuthModal();
							that.getUserInfo(res.data.token);
							that.$u.toast(res.msg);
						}

					});
			},

			// 3.注册
			async registerSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						"user.register", {
							mobile: that.form["register"].data.mobile,
							code: that.form["register"].data.code,
							password: that.form["register"].data.password
						},
						"注册中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.$u.toast(res.msg);
							that.closeAuthModal();
							that.getUserInfo(res.data.token);
						}
					});
			},

			// 4.忘记密码
			async forgotPwdSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						"user.forgotPwd", {
							mobile: that.form["forgotPwd"].data.mobile,
							code: that.form["forgotPwd"].data.code,
							password: that.form["forgotPwd"].data.password
						},
						"修改中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.$u.toast(res.msg);
							if (that.isLogin) {
								that.closeAuthModal();
							} else {
								that.showAuthModal("accountLogin");
							}
						}
					});
			},

			// 5.绑定手机
			async bindMobileSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						"user.bindMobile", {
							mobile: that.form["bindMobile"].data.mobile,
							code: that.form["bindMobile"].data.code,
							password: that.form["bindMobile"].data.password
						},
						"绑定中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.$u.toast(res.msg);
							that.closeAuthModal();
							that.getUserInfo();
						}
					});
			},

			// 6.修改密码
			async changePwdSubmit() {
				let that = this;
				(await that.validateSubmit()) &&
				that
					.$http(
						"user.changePwd", {
							oldpassword: that.form["changePwd"].data.oldPassword,
							newpassword: that.form["changePwd"].data.newPassword
						},
						"修改中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.closeAuthModal();
							that.$u.toast(res.msg);
							that.getUserInfo(res.data.userinfo.token);
						}
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.input_BOX {
		/deep/ .input {
			// .u-input__input{
			// color: #fff!important;
			font-size: 19px !important;
			// }
		}
	}

	.uni-input-input {
		font-size: 19px;
	}

	.BIGYZM {
		height: 35px;
		width: unset !important;
		line-height: 35px !important;
		background-color: #ffffff;
		border-radius: 18px;
		border: solid 1px #ff3400 !important;
		font-size: 14px !important;
		padding-left: 17px;
		padding-right: 17px;
		font-weight: bold;
		color: #ff3400 !important;
	}

	.BIGbtnLogin {
		height: 35px;
		background-image: linear-gradient(90deg,
				#ff8300 0%,
				#ff3d00 100%),
			linear-gradient(#ffffff,
				#ffffff) !important;
		background-blend-mode: normal,
			normal;
		border-radius: 18px !important;
		line-height: 35px !important;
		font-size: 16px !important;
	}

	@keyframes title-animation {
		0% {
			font-size: 32rpx;
		}

		100% {
			font-size: 36rpx;
		}
	}

	.form-wrap {
		.form-item {
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			padding: 20rpx 0;
			color: $u-main-color;
			box-sizing: border-box;
			line-height: $u-form-item-height;
			width: 100%;

			.item-title {
				width: 140rpx;
				font-size: 30rpx;
				color: #333;
				font-weight: 600;
				text-align: left;
			}

			.message-error {
				text-align: left;
				font-size: 24rpx;
				line-height: 24rpx;
				color: $u-type-error;
				margin-top: 12rpx;
				margin-left: 120rpx;
			}
		}
	}

	.login-wrap {
		padding: 50rpx 34rpx;
		min-height: 700rpx;
		background-color: #fff;

		.head-box {
			.head-title {
				min-width: 160rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				line-height: 36rpx;
			}

			.head-title-active {
				width: 160rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #999;
				line-height: 36rpx;
			}

			.head-title-animation {
				animation-name: title-animation;
				animation-duration: 0.1s;
				animation-timing-function: ease-out;
				animation-fill-mode: forwards;
			}

			.head-title-line {
				position: relative;

				&::before {
					content: "";
					width: 1rpx;
					height: 34rpx;
					background-color: #e4e7ed;
					position: absolute;
					left: -30rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.head-subtitle {
				font-size: 26rpx;
				font-weight: 400;
				color: #c2c7cf;
				text-align: left;
				display: flex;
			}
		}

		.code-btn[disabled] {
			background-color: #fff;
		}

		.code-btn-start {
			width: 160rpx;
			line-height: 56rpx;
			border: 1rpx solid #e9b766;
			border-radius: 28rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #e9b766;
			opacity: 0.5;
		}

		.forgot-btn {
			width: 160rpx;
			line-height: 56rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #999;
		}

		.code-btn-end {
			opacity: 1 !important;
		}

		.login-btn-start {
			width: 158rpx;
			line-height: 56rpx;
			background: linear-gradient(90deg, #e9b461, #eecc89);
			border-radius: 28rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.type-btn {
			padding: 20rpx;
			margin: 40rpx auto;
			width: 200rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #999999;
		}

		.auto-login-box {
			width: 100%;

			.auto-login-img {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				margin: 0 30rpx;
			}
		}

		.agreement-box {
			margin: 80rpx auto 0;

			.protocol-check {
				transform: scale(0.7);
			}

			.agreement-text {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;

				.tcp-text {
					color: #e9b562;
				}
			}
		}
	}

	// 修改密码
	.editPwd-btn-box {
		.save-btn {
			width: 690rpx;
			line-height: 70rpx;
			background: linear-gradient(90deg, #e9b461, #eecc89);
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.forgot-btn {
			width: 690rpx;
			line-height: 70rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
		}
	}

	.BIGpwdSave {
		background-image: linear-gradient(90deg,
				#ff8300 0%,
				#ff3d00 100%),
			linear-gradient(#ffffff,
				#ffffff) !important;
		background-blend-mode: normal,
			normal !important;
		font-size: 20px !important;
		font-weight: bold !important;
	}

	.BIGtostTitle {
		font-size: 16px !important;
		color: #999 !important;
		white-space: nowrap;
		justify-content: center !important;
	}

	.BIGgetCode {
		border: solid 1px #ff3400 !important;
		color: #ff3400 !important;
		font-size: 14px !important;
		font-weight: bold !important;
		opacity: unset !important;
		width: unset !important;
		padding: 0px 18px;
		box-sizing: border-box;
		height: 35px;
		border-radius: 18px !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.BIGbtnfoget {
		height: 35px !important;
		background-image: linear-gradient(90deg,
				#ff8300 0%,
				#ff3d00 100%),
			linear-gradient(#ffffff,
				#ffffff) !important;
		background-blend-mode: normal,
			normal !important;
		border-radius: 18px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px !important;
		font-weight: bold !important;
		padding: 0 37px;
		width: unset !important;
	}
</style>